<template>
  <!-- v-loading="true" -->
  <div>
    <pageSearch :searchFormConfig="searchFormConfig" @searchSubmit="searchSubmit" />
    <pageTable :tableData="tableData" :tableInit="params.tableInit" @sizeChange="sizeChange"
      @currentChange="currentChange" @exportFn="exportExcel" v-loading="loading">
      <template #px="{ row }">
        <el-tag>{{ row.px < 10 ? '0' + row.px : row.px }}</el-tag>
      </template>
      <template #list="{ row }">
        {{ filterLinearArray(row.list) }}
      </template>
      <template #operation="{ row }">
        <el-button type="primary" link @click="openDialogFn(row)">编辑</el-button>
        <!-- <el-popconfirm title="确认要删除吗?" @confirm="delData">
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
</el-popconfirm> -->
      </template>
    </pageTable>

    <Dialog width="50%" top="5vh" ref="DialogRef" title="编辑" @submit="submitForm(ruleFormRef)"
      @onclose="resetForm(ruleFormRef)">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">

        <el-row :gutter="20">

          <el-col :span="24">
            <div>产品基本信息</div>
            <el-divider />
          </el-col>

          <el-col :span="12">
            <el-form-item label="应用名称" prop="name">
              <el-input v-model="ruleForm.name" autocomplete="off" disabled placeholder="请输入应用名称" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="应用领域" prop="parname">
              <el-input v-model="ruleForm.parname" autocomplete="off" disabled placeholder="请输入应用领域" />
              <!-- <el-select style="width: 100%" v-model="serachForm.productclassoneid" placeholder="请选择产品状态"
                @change="selectChange">
                <el-option v-for="option in searchList" :key="option.px" :label="option.name" :value="option.id" />
              </el-select> -->
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="应用简介" prop="jj">
              <el-input v-model="ruleForm.jj" autocomplete="off" placeholder="请输入应用简介"
                :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="应用描述">
              <el-row class="w-full">
                <el-col class="mb-4" :span="24" v-for="(item, index) in ruleForm.applicationVersionClassDescriptions"
                  :key="index">
                  <el-input v-model="item.description" autocomplete="off" placeholder="请输入应用描述" />
                </el-col>
                <el-col :span="24">
                  <el-button @click="addapplicationVersionClassDescriptions">添加新应用描述</el-button>
                </el-col>
              </el-row>

            </el-form-item>
          </el-col>

          <!-- <.......  -->
          <el-col :span="24" class="mt-8">
            <div>方框图</div>
            <!-- <el-divider /> -->
          </el-col>


          <el-col :span="24" class="mt-8">


            <pageTable :tableData="FKImgData" :tableInit="FTableInit" v-loading="loading"
              @pageAdd="operationFangKuaiImg('add')">

              <template #img="{ row }">
                <el-image style="width: 100px; height: 100px;z-index: 9999999;" :src="getPicImg(row.img)"
                  :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[getPicImg(row.img)]"
                  :preview-teleported='true' :initial-index="4" fit="cover" />
              </template>

              <template #operation="{ row }">
                <el-button type="primary" link @click="operationFangKuaiImg('redact', row)">编辑</el-button>
                <el-popconfirm title="确认要删除吗?" @confirm="delFangKUangTu(row.imgID)">
                  <template #reference>
                    <el-button type="danger" link>删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </pageTable>
          </el-col>


          <!-- .....>  -->

          <el-col :span="24" class="mt-8">
            <div>技术文档</div>
            <el-divider />
          </el-col>

          <el-col :span="24">
            <el-form-item label="技术文档">
              <el-row class="w-full mb-4" v-if="ruleForm.selectionGuides.length > 0">
                <el-col :span="5" class="text-center">
                  文档类型
                </el-col>
                <el-col :span="6" class="text-center">
                  文档
                </el-col>
                <el-col :span="5" class="text-center">
                  文档格式
                </el-col>
                <el-col :span="5" class="text-center">
                  文档权限
                </el-col>
                <el-col :span="3" class="text-center">
                  操作
                </el-col>
              </el-row>
              <el-row class="w-full ">
                <el-col :span="24">
                  <template v-for="(v, index) in ruleForm.selectionGuides" :key="v.webId">
                    <div class="mb-4">
                      <technicalFile @delItemFn="delItemFN" :itemIndex="index" :searchList="filesStatus"
                        v-model="ruleForm.selectionGuides[index]"></technicalFile>

                    </div>
                  </template>
                </el-col>
              </el-row>


              <el-row class="w-full">
                <el-col :span="24">
                  <el-button @click="addtechnicalFile">添加文档</el-button>
                </el-col>
              </el-row>

            </el-form-item>
          </el-col>














        </el-row>
      </el-form>

    </Dialog>


    <div class="fixed left-0 top-0 right-0 bottom-0  flex justify-center items-center"
      style="background-color:rgba(0,0,0,0.5);z-index:3000" v-if="isShowPoper" @click="closeTwoFn">
      <div @click.stop="" class="p-[20px] w-[80%] min-w-[1500px]" style="background-color:#f4f5f6;">

        <div class="pl-[20px]">
          <div class="font-semibold text-[34px] mb-[20px]">编辑方框图</div>
          <div class="flex w-full pr-[20px]">
            <el-button :disabled="isaddzbxx" type="primary" plain v-if='!isShowUpLoader'
              @click="addzbxx">添加节点</el-button>
            <el-input v-model="ruleForm2.text" placeholder="请命名方框图" style="width: 300px;margin: 0 20px;"></el-input>
            <el-button v-if="ruleForm2.imgID" type="primary" plain @click="upLoaderImg">更换图片</el-button>
            <!-- <el-button type="primary" plain @click="isShowRight = !isShowRight">切换显示右侧</el-button> -->
            <div></div>
            <el-button type="primary" class="ml-auto" plain @click="closeTwoFn">退出编辑</el-button>
          </div>
        </div>

        <!-- 拖拽 -->
        <div class="p-[20px] flex gap-[20px] justify-center" style='background-color:#f4f5f6'>
          <div class="min-w-[968px] h-[618px] flex justify-center">
            <template v-if="isShowUpLoader">
              <div class="w-full h-full flex justify-center items-center">
                <el-upload ref="upload" class="w-full max-w-[968px]" name="fileUpload" drag :data="{ ispic: '0' }"
                  :headers="{
      token
    }" :limit="1" :show-file-list="false" :action="uploadUrl" multiple :on-success="onSuccessFn">
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    Drop file here or <em>click to upload</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      请上传基于968*618基数的图片
                    </div>
                  </template>
                </el-upload>
              </div>
            </template>
            <template v-else>
              <div class="flex bg-white w-[968px] relative mx-auto">
                <img class="min-w-[968px] h-[618px]" :src="getPicImg(ruleForm2.imgID)" alt="">
                <div class="absolute top-0 bottom-0 left-0 right-0" @click="tapImgBox">
                  <vue-drag-resize :isActive="item.isActive" :isDraggable="true" :isResizable="true"
                    v-on:resizing="resize($event, item)" v-on:dragging="dragging($event, item)" v-on:dragstop="dragstop"
                    v-on:resizestop="resizestop" :aspectRatio='false' :parentLimitation="true" :minh="10" :minw="10"
                    :z="9999999999999" :x="item.lefts" :y="item.top" :w="item.w" :h="item.h"
                    v-for="(item, index) in ruleForm2.children" :key="item.id">
                    <div @click.stop="" class="whitespace-nowrap hover:cursor-move flex justify-center items-center"
                      style="background: rgba(0, 175, 18, 0.05);border: 1px solid #00AF12;opacity: 1;"
                      :style="'width:' + item.w + 'px;height:' + item.h + 'px;'"></div>
                    <div class="w-[20px] h-[20px] mt-[10px]" v-if="item.isActive" @click="delFKImg(index)">
                      <img class="no_dragImg cursor-pointer" src="@/assets/product/del.png" alt="">
                    </div>
                  </vue-drag-resize>
                </div>
              </div>
            </template>




          </div>
          <!-- 右侧 -->
          <div class="flex-1 h-[618px] flex flex-col gap-[20px]" v-if="isShowRight">
            <el-card hover="never" class="flex-1">
              <div class="">

                <el-cascader v-model="ruleForm4.pOPtionsIDList" class="w-full mb-[10px]" :options="productOPtions"
                  :props="{
      label: 'name',
      value: 'id',
      children: 'list'
    }" @change="handleChange" :teleported="false" placeholder="请选择一二级菜单" />


                <el-select v-model="ruleForm4.productIDList" multiple :collapse-tags="true"
                  :collapse-tags-tooltip="true" :teleported="false" placeholder="请选择产品" style="width: 100%"
                  @change="productListchange">
                  <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>


                <div class="h-[158px] mt-[10px]" style="overflow: auto">
                  <div v-for="(item, index) in ruleForm4.nowProductList" :key="index" class="flex">
                    <div>{{ item.name }}</div>
                    <div>-{{ item.description }}</div>
                  </div>
                </div>
              </div>

            </el-card>

            <el-card hover="never" class="flex-1">
              <div class="">

                <el-select v-model="ruleForm4.evaluationeditionIDlist" multiple collapse-tags collapse-tags-tooltip
                  :teleported="false" placeholder="请选择评估板" style="width: 100%" @change="evaluationeditionchange">
                  <el-option v-for="item in evaluationeditionlist" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>


                <div class="h-[188px] mt-[10px]" style="overflow: auto">
                  <div v-for="(item, index) in ruleForm4.nowEvaluationeditionList" :key="index" class="flex">
                    <div>{{ item.name }}</div>
                    <div>-{{ item.description }}</div>
                  </div>
                </div>
              </div>
            </el-card>
            <el-button @click="saveFangkuagnTu" style="height:40px;" color="#626aef">保存</el-button>
          </div>
        </div>



      </div>
    </div>



  </div>
</template>

<script setup lang="ts">
import pageSearch from "@/components/base-ui/page-search";
import pageTable from "@/components/base-ui/page-table";
import Dialog from "@/components/base-ui/dialog";
import { reactive, ref, computed, watch } from 'vue'
import { randomString } from '@/utils/xwCommon'
import type { FormInstance, FormRules, UploadProps, UploadUserFile, UploadInstance, UploadRawFile } from 'element-plus'
import { clone } from "@pureadmin/utils";
import technicalFile from './components/technicalFile.vue'
import { searchFormConfig } from "./config/listSearch.config";
import { tableInit } from "./config/listTable.config";
import { FTableInit } from "./config/fangKuai.config";
import { applicationselyylb, qpapplicationversionselpage, updateclassinfo, savepicinfo, delappversionpic } from '@/api/application'
import { usepageTable } from '@/components/base-ui/page-table/usePageTable'
import { message } from "@/utils/message";
import { getPicImg, uploadUrl } from '@/api/upload'
import { getStorage } from '@/utils/storage'
import { getselpage } from '@/api/classification'
import { productselpage } from '@/api/productList'
import { getevaluationeditionlist } from '@/api/evaluationeditionlist'




const {
  exportExcel,
  tableData,
  getData,
  params,
  loading,
  sizeChange,
  currentChange,
  searchSubmit,
  filesStatus,
  DialogRef,
  openDialog,
} = usepageTable({
  tableInit,
  getRes: applicationselyylb,
})

getData()






const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: '',
  parname: '',
  applicationVersionClassid: '',
  jj: '',
  applicationVersionClassDescriptions: [],
  selectionGuides: []
})


const filterLinearArray = (arr) => {
  let a = arr.map(v => v.name)
  return a.join(',')
}



const validateList = (rule: any, value: any, callback: any) => {
  if (value.length === 0) {
    callback(new Error('请填写应用简介'))
  } else {
    let filterArray = value.filter(v => Boolean(v.name));
    if (filterArray.length === 0) {
      callback(new Error('请填写应用简介'))
    } else {
      callback()
    }
  }
}


const rules = reactive<FormRules<typeof ruleForm>>({
  jj: [
    { required: true, message: '请填写应用简介', trigger: 'blur' },
  ],
})


const FKImgData = ref([])

const openDialogFn = (row) => {
  ruleForm.name = row.name
  ruleForm.parname = row.parname
  ruleForm.applicationVersionClassid = row.id
  getDetailMessage()
  openDialog()
}

const getDetailMessage = (callback) => {
  qpapplicationversionselpage({ application_version_classid: ruleForm.applicationVersionClassid }).then(res => {
    ruleForm.jj = res.result.jj
    ruleForm.applicationVersionClassDescriptions = res.result.applicationVersionClassDescriptions
    ruleForm.selectionGuides = res.result.selectionGuides
    FKImgData.value = res.result.pictureinfoResponses
    if (callback && typeof callback === 'function') {
      callback()
    }
  })
}



const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      let filterArray = ruleForm.applicationVersionClassDescriptions.filter(v => v.description);
      let A = filterArray.map(v => v.description)
      let Q = {
        applicationVersionClassid: ruleForm.applicationVersionClassid,
        jj: ruleForm.jj,
        description: A,
        linklist: ruleForm.selectionGuides,
      }
      updateclassinfo(Q).then(res => {
        message("修改成功", {
          type: "success"
        });
        DialogRef.value.close()
        getData()
      })
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()

  ruleForm.name = ''
  ruleForm.parname = ''
  ruleForm.jj = ''
  ruleForm.applicationVersionClassDescriptions = []
  ruleForm.selectionGuides = []
  FKImgData.value = []

}
const addapplicationVersionClassDescriptions = () => {
  ruleForm.applicationVersionClassDescriptions.push({
    description: ''
  })
}



const addtechnicalFile = () => ruleForm.selectionGuides.push({ gs: '', level: 0, linkid: '', lx: '', name: '', webId: randomString(10) })

const delItemFN = (index) => ruleForm.selectionGuides.splice(index, 1)


const delFKImg = (index) => ruleForm2.children.splice(index, 1)


// 方块图

const isShowRight = ref(true)  // 右侧是否显示
const FKTypeText = ref('新增')
const token = getStorage('token')
const upload = ref<UploadInstance>()



const ruleForm2 = reactive({
  text: '',
  imgID: '',
  children: [],
  id: '',
})



const onSuccessFn: UploadProps['onSuccess'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, 'uploadFile')
  ruleForm2.imgID = uploadFile.data.result[0].uuid
  isShowUpLoader.value = false

}


const upLoaderImg = () => {
  isShowUpLoader.value = true
  ruleForm2.imgID = ''
  setTimeout(() => {
    upload.value!.clearFiles()
  }, 200)
}


const operationFangKuaiImg = (type, row) => {
  // add     redact
  if (type === 'add') {
    FKTypeText.value = '新增'
    isShowRight.value = false
    isShowUpLoader.value = true

    ruleForm2.id = new Date().getTime()

  } else {
    const temporaryArray = clone(row, true)
    temporaryArray.children.forEach(v => {
      v.applicationVersionpicproductRequests = v.applicationVersionpicproducts
      v.applicationVersionpicboardRequests = v.applicationVersionpicboards
    })
    FKTypeText.value = '编辑'
    isShowRight.value = true
    isShowUpLoader.value = false
    ruleForm2.id = temporaryArray.imgID
    ruleForm2.text = temporaryArray.text
    ruleForm2.imgID = temporaryArray.img

    ruleForm2.children = temporaryArray.children
  }

  isShowPoper.value = true
}



// 获取产品和评估板数据

const ruleForm3 = reactive({
  productclassone: '',  //一级产品类名称
  productclassoneid: '',  //一级产品类id（大类）
  productclasstwo: '',  //二级产品类名称（下级）
  productclasstwoid: '',  //二级产品类id（下级）
})

const productOPtions = ref([])
const ALlproductOPtions = ref([])
const getproductOPtions = () => {
  getselpage().then(res => {
    ALlproductOPtions.value = clone(res.result, true)
    productOPtions.value = res.result
  })
}

const productList = ref([])
const productLoading = ref(false)
const getproductList = () => {
  productLoading.value = true
  productList.value = []
  let Q = {
    index: 1,
    size: 1000,
    name: '',
    ...ruleForm3
  }
  productselpage(Q).then(res => {
    res.result.forEach(v => {
      v.productid = v.id
    })

    productList.value = res.result
  }).finally(() => {
    productLoading.value = false
  })
}

const AllproductList = ref([])
const getproductListAll = () => {
  let Q = {
    index: 1,
    size: 1000,
  }
  productselpage(Q).then(res => {
    res.result.forEach(v => {
      v.productid = v.id
    })
    AllproductList.value = res.result
  })
}



const evaluationeditionlist = ref([])
const Allevaluationeditionlist = ref([])
const getevaluationeditionlistFn = () => {
  let Q = {
    index: 1,
    size: 1000,
    name: '',
  }
  getevaluationeditionlist(Q).then(res => {
    evaluationeditionlist.value = res.result
    Allevaluationeditionlist.value = clone(res.result, true)
  })
}



getproductListAll()   // 获取所有产品
getevaluationeditionlistFn()  // 获取评估板列表
getproductOPtions()        // 获取产品级别列表

const isaddzbxx = computed(() => {
  let a = ruleForm2.children.find(v => v.isActive)
  if (a) {
    return true
  } else {
    return false
  }
})
// 二级弹框
const isShowPoper = ref(false)
const isShowUpLoader = ref(false)
const addzbxx = () => {
  let isActiveItem = ruleForm2.children.find(v => v.isActive)
  if (isActiveItem) {
    return message("请先保存当前节点操作", {
      type: "warning"
    });
  }
  ruleForm2.children.push({
    h: 50,
    w: 50,
    lefts: 0,
    top: 0,
    id: new Date().getTime(),
    isActive: true,
    applicationVersionpicboardRequests: [],  //  评估板
    applicationVersionpicproductRequests: []   // 产品
  })
}

// 当前操作节点
const ruleForm4 = reactive({
  id: '',
  nowProductList: [],   //当前产品列表
  nowEvaluationeditionList: [],  //当前评估板列表


  pOPtionsIDList: [],  // 产品二级分类id集合
  productIDList: [],   // 产品id集合
  evaluationeditionIDlist: [], //评估板id集合
})


const operatorFn = (item) => {
  if (item.id != ruleForm4.id) {
    console.log(item, '节点改变')
    let temporary = clone(item, true)
    ruleForm4.id = temporary.id   // 当前节点id
    ruleForm4.nowProductList = temporary.applicationVersionpicproductRequests //   当前节点产品
    ruleForm4.nowEvaluationeditionList = temporary.applicationVersionpicboardRequests //当前节点评估板
    // 产品搜索框不做关联
    ruleForm4.productIDList = temporary.applicationVersionpicproductRequests.map(v => v.productid)

    // 关联评估板id集合
    ruleForm4.evaluationeditionIDlist = temporary.applicationVersionpicboardRequests.map(v => v.boardid)


    ruleForm4.pOPtionsIDList = []
    productList.value = AllproductList.value
    evaluationeditionlist.value = Allevaluationeditionlist.value
    productOPtions.value = ALlproductOPtions.value
  }
}

const ischange = ref(false)
const tapImgBox = () => {
  if (!ischange.value) {
    ruleForm2.children.forEach(v => {
      v.isActive = false
    })
    clesarruleForm4()
  }
}

const clickedFn = (e, item) => {
  return false

  // console.log(ischange.value, 'ischange.value')
  // if (ischange.value) {
  //   return
  // }

  // console.log('222222')
  // ruleForm2.children.forEach(v => {
  //   v.isActive = false
  // })
  // item.isActive = true
  // operatorFn(item)
}


const onActivated = (e) => {
  console.log(e)
}

const resize = (e, item) => {
  console.log('resize')
  operatorFn(item)
  item.w = e.width
  item.h = e.height
  ischange.value = true
}
const resizestop = () => {
  isShowRight.value = true
}
const dragging = (e, item) => {
  console.log('dragging')

  if (item.id === ruleForm4.id) {
    if (e.left !== item.lefts || item.top !== e.top) {
      operatorFn(item)
      item.lefts = e.left
      item.top = e.top
      ischange.value = true
    }
  } else {
    if (!ischange.value) {
      ruleForm2.children.forEach(v => {
        v.isActive = false
      })

      item.isActive = true
      operatorFn(item)
    } else {
      console.log('错误', ruleForm2.children)
    }
  }


}
const dragstop = () => {
  isShowRight.value = true
}


const tapDel = (index) => ruleForm2.children.splice(index, 1)


const handleChange = (value) => {
  productOPtions.value.forEach(v => {
    if (v.id === value[0]) {
      ruleForm3.productclassone = v.name
      ruleForm3.productclassoneid = value[0]
    }
    v.list.forEach(i => {
      if (i.id === value[1]) {
        ruleForm3.productclasstwo = i.name
        ruleForm3.productclasstwoid = value[1]
      }
    })
  })
  getproductList()
}

const evaluationeditionchange = (value) => {
  let a = evaluationeditionlist.value.filter(v => value.includes(v.id))
  ruleForm4.nowEvaluationeditionList = a.map(v => {
    return {
      boardid: v.id,
      name: v.name,
      zbid: ruleForm4.id,
      description: v.description
    }
  })
}
const productListchange = (value) => {
  console.log(AllproductList.value)
  let b = AllproductList.value.filter(v => value.includes(v.id))
  ruleForm4.nowProductList = b.map(v => {
    return {
      ...v,
      zbid: ruleForm4.id
    }
  })
}



const saveFangkuagnTu = () => {

  console.log(ruleForm2.children)
  console.log(ruleForm4, 'ruleForm4')

  ruleForm2.children.forEach(v => {
    v.isActive = false
    v.picid = ruleForm2.imgID
    if (v.id === ruleForm4.id) {
      v.applicationVersionpicboardRequests = ruleForm4.nowEvaluationeditionList
      v.applicationVersionpicproductRequests = ruleForm4.nowProductList
    }
  })


  // 后端产品id污染，单独var个变量处理数据
  let TA = clone(ruleForm2.children, true)
  TA.forEach(v => {
    v.applicationVersionpicproductRequests.forEach(i => {
      i.id = i.productid
    })
  })

  let Q = {
    name: ruleForm2.text,
    pic: ruleForm2.imgID,
    applicationversionid: ruleForm.applicationVersionClassid,
    id: ruleForm2.id,
    zbxx: TA
  }

  savepicinfo(Q).then(res => {
    getDetailMessage()
    message("操作成功", {
      type: "success"
    });

    clesarruleForm4()



  })
}


// 重新更新数据
// const updataRow = () => {
//   console.log(ruleForm2.id, 'ruleForm2.id')
//   console.log(FKImgData.value, 'FKImgData')
//   let item = FKImgData.value.find(v => v.imgID == ruleForm2.id)
//   let a = clone(item, true)
//   console.log(item, 'item')

//   ruleForm2.children = a.children
// }

const clesarruleForm4 = () => {
  ruleForm4.id = ''
  ruleForm4.nowProductList = []
  ruleForm4.nowEvaluationeditionList = []
  ruleForm4.pOPtionsIDList = []
  ruleForm4.productIDList = []
  ruleForm4.evaluationeditionIDlist = []


  productList.value = []
  productOPtions.value = []
  evaluationeditionlist.value = []


  ischange.value = false
}


const delFangKUangTu = (id) => {
  delappversionpic(id).then((res) => {
    getDetailMessage()
  })
}

const closeTwoFn = () => {
  productList.value = []


  isShowPoper.value = false
  ruleForm2.text = ''
  ruleForm2.children = []
  ruleForm2.imgID = ''
  ruleForm2.id = ''


  ruleForm3.productclassone = ''
  ruleForm3.productclassoneid = ''
  ruleForm3.productclasstwo = ''
  ruleForm3.productclasstwoid = ''


  ruleForm4.id = ''
  ruleForm4.nowProductList = []
  ruleForm4.nowEvaluationeditionList = []
  ruleForm4.pOPtionsIDList = []
  ruleForm4.productIDList = []
  ruleForm4.evaluationeditionIDlist = []

}

</script>

<style scoped>
.isActiver {
  background: rgba(0, 175, 18, 0.05);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #00AF12;
}

.Activer {
  border: 2px solid #ff6600;
}


.wx_border:hover {
  border: 2px solid #ff6600;
}

:deep(.el-popper .is-pure .is-light .el-cascader__dropdown) {
  z-index: 9999999999999999999999999999;
}


:deep(.el-select-dropdown__wrap) {
  max-height: 150px !important;
}



::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #f4f5f6;
  height: 60px;
  background-color: #9197f4;
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-track-piece {
  width: 2px;
  background: #f4f5f6;
}
</style>
